import React, { lazy, Suspense } from 'react'
import {
  HashRouter as Router,
  Switch,
  Route
} from 'react-router-dom'
import Home from './pages/home/index.jsx'
import Footer from './components/footer'
const Kind = lazy(() => import('./pages/kind/index.jsx'))
const Cart = lazy(() => import('./pages/cart/index.jsx'))
const User = lazy(() => import('./pages/user/index.jsx'))
const Detail = lazy(() => import('./pages/detail/index.jsx'))
const Test = lazy(() => import('./pages/detail/Test.jsx'))
function App( props ) {
  console.log(props)
  return (
    <Router>
      <div className="container">
        {/* vue设置路由时，可以使用路由的懒加载 */}
        {/* react中设置路由时，也可以使用路由的懒加载 */}
        <Suspense fallback = { <div>正在加载。。。</div>}>
          <Switch>
            <Route path="/home" component = { Home } />
            <Route path="/kind" component = { Kind } />
            <Route path="/cart" component = { Cart } />
            <Route path="/user" component = { User } />
            <Route path="/detail/:proid" component = { Detail } />
            <Route path="/test" component = { Test } />
          </Switch>
        </Suspense>
        <Switch>
          <Route path="/home" component = { Footer } />
          <Route path="/kind" component = { Footer } />
          <Route path="/cart" component = { Footer } />
          <Route path="/user" component = { Footer } />
        </Switch>
      </div>
  
    </Router>
  )
}

export default App
